var left_btn = document.getElementsByClassName('but1')[0]
var right_btn = document.getElementsByClassName('but2')[0]
var img = document.querySelector('.imgs').querySelectorAll('div')
var select = document.querySelector('.select').querySelectorAll('li')


var id = 0

// 点击左边
left_btn.onclick = function() {
    id --
    if (id <= 0) {
        id = img.length-1
    }
    console.log('left button clicked')
    changediv(id)
}

// 点击右边
right_btn.onclick = function() {
    id ++
    if (id >= img.length-1) {
        id = 0
    }
    changediv(id)
}


function changediv(id) {
    for(var i = 0; i < img.length; i++) {
        img[i].style.display = 'none'
    }
    img[id].style.display = 'block'
    // select[id].setAttribute('class', 'one')
}


// for(var j=0;j<select.length;j++){
//     select[j].onclick = function () {
//         // 这样写取不到值,对于for里面嵌套函数都要这样写
//         console.log(j)
//         changediv(j)
//     }
// }

// 对于指示器
for(var j=0;j<select.length;j++){
    (
        function (j){
            select[j].onclick = function () {
                // 这样写取不到值
                console.log(j)
                changediv(j)
            }
        }
    )(j)
}


// 设置定时器
function timer (){
    setInterval(
        function() {
            id ++
            // 要写大于等于，因为如果点太快，就会超过等于值，会报错
            if (id >= img.length-1) {
                id = 0
            }
            changediv(id)
        }
    , 2500)
}

timer()
